<template>
    <el-dialog
        title="编辑角色权限"
        :visible="visible"
        append-to-body
        :destroy-on-close="true"
        @close="close"
    >
        <el-form
            size="small"
            :model="permissionForm"
            :rules="rules"
            label-width="80px"
            ref="permissionForm"
        >
            <el-form-item label="角色名称" prop="role_name">
                <el-input v-model="permissionForm.role_name"></el-input>
            </el-form-item>
            <el-form-item label="菜单权限" prop="per_ids">
                <el-tree
                    :data="treeListData"
                    :props="defaultProps"
                    :show-checkbox="true"
                    node-key="per_id"
                    :default-checked-keys="defaultCheckedKeys"
                    ref="tree"
                ></el-tree>
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-switch
                    v-model="permissionForm.status"
                    active-value="1"
                    inactive-value="0"
                >
                </el-switch>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="close" size="small">取 消</el-button>
            <el-button
                type="primary"
                size="small"
                @click="onSubmit('permissionForm')"
                :disabled="isDisabled"
                :loading="isLoading"
                >确 定</el-button
            >
        </span>
    </el-dialog>
</template>

<script>
import { getAllPer, saveRole } from "@/api/staff.js";
import { isEmptyObject } from "@/utils/util.js";
export default {
    name: "editPermission",
    props: {
        scopeRow: {
            type: Object,
            default: {},
        },
        treeList: {
            type: Array,
            default: [],
        },
    },
    watch: {
        scopeRow: {
            immediate: true,
            handler: function (newVal, oldValue) {
                let that = this;
                if (!isEmptyObject(newVal)) {
                    that.scopeRow = newVal;
                    that.permissionForm.role_name = that.scopeRow.role_name;
                    that.permissionForm.per_ids = that.scopeRow.per_ids;
                    that.permissionForm.status = that.scopeRow.role_status;
                    that.permissionForm.role_id = that.scopeRow.role_id;
                    that.permissionForm.status = that.scopeRow.role_status;
                    that.defaultCheckedKeys = that.scopeRow.per_ids.split(",");
                }
            },
        },
        treeList: {
            immediate: true,
            handler: function (newVal, oldValue) {
                let that = this;
                this.treeListData = newVal;
            },
        },
    },
    data() {
        return {
            isDisabled: false,
            isLoading: false,
            permissionForm: {
                role_name: "",
                per_ids: "",
                status: "1",
                role_id: "",
            },
            defaultCheckedKeys: [],
            switchStatus: true,
            rules: {
                role_name: [
                    {
                        required: true,
                        message: "请输入角色名称",
                        trigger: "blur",
                    },
                ],
            },
            treeListData: [],
            defaultProps: {
                children: "secondPerList",
                label: "title",
            },
            visible: false,
        };
    },
    created() {},
    methods: {
        add() {
            this.visible = true;
        },
        onSubmit(formName) {
            this.isDisabled = true;
            this.isLoading = true;
            this.permissionForm.per_ids = this.$refs.tree
                .getCheckedKeys()
                .join(",");
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    saveRole(this.permissionForm).then((res) => {
                        if (res.code == 0) {
                            this.isDisabled = false;
                            this.isLoading = false;
                            this.$message({
                                message: res.msg,
                                type: "success",
                            });
                            this.close();
                            this.$emit("reload");
                        }else{
                            this.isDisabled = false;
                            this.isLoading = false;
                        }
                    });
                } else {
                    return false;
                }
            });
        },
        close() {
            this.visible = false;
        },
    },
};
</script>

<style>
</style>